<script setup lang="ts">
/*
 * @description: 线性图基础组件
 * @fileName: dp-chart-line-base.vue
 * @params
 * @author: lxx
 * @date: 2025-04-16 14:48:00"
 * @version: V1.0.0
 */
import * as echarts from 'echarts'
import type { ChartPropsInt, chartItemType, chartDataInt } from '@/hooks/useChart/charTypes'
import { ChartPropsDefault, getBaseColor } from '@/hooks/useChart/charBase'
import { useChart } from '@/hooks/useChart/useChart'
const echartsRef = ref()
const emits = defineEmits(['chartClick'])
const props = withDefaults(defineProps<ChartPropsInt>(), ChartPropsDefault)
interface chartOptionsInt {
  type: chartItemType
  areaStyle: {
    color: any
  }
  itemStyle: {
    color: string
  }
  lineStyle: {
    color: string
  }
  data: {
    name: string
    value: number
  }[]
}
const options: { series: chartOptionsInt[] } = {
  series: []
}

const setOptions = (chartData: chartDataInt[], index?: number) => {
  return {
    type: props.chartType as chartItemType,
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: Array.isArray(props.color) ? (props.color as string[])[index as number] : (props?.color as string) || getBaseColor()
        },
        {
          offset: 1,
          color: 'transparent'
        }
      ])
    },
    itemStyle: {
      color: Array.isArray(props.color) ? (props.color as string[])[index as number] : (props?.color as string) || getBaseColor()
    },
    lineStyle: {
      color: Array.isArray(props.color) ? (props.color as string[])[index as number] : (props?.color as string) || getBaseColor()
    },
    data: props?.customizeDataFun ? props.customizeDataFun(chartData) : chartData
  }
}

const dataChangeFn = (chartData: chartDataInt[] | chartDataInt[][]) => {
  options.series = []
  // 多条数据
  if (Array.isArray(chartData[0])) {
    chartData.map((item, index) => {
      options.series.push(setOptions(item as chartDataInt[], index))
    })
  } else {
    options.series.push(setOptions(chartData as chartDataInt[]))
  }
  return options
}

dataChangeFn(props.chartData)

useChart(echartsRef, props, options, emits, dataChangeFn)
</script>
<template>
  <div ref="echartsRef" :style="{ width: props.width, height: props.height }"></div>
</template>
<style>
/* 样式调整 */
</style>
